<template>
    <div>
        <div class="list-title">
            <span class="list-title-title">第一部分：运单统计</span>
            <span class="list-title-des">（ 说明：北京，深圳3.0统计；上海2.0统计 ）</span>
        </div>
        <chart-transverse-bar :waybillData="waybillData"></chart-transverse-bar>
        <el-row class="table-data">
            <el-col :span="24" class="table-list">
                <el-col :span="6" class="table-list-lie"><span>城市</span></el-col>
                <el-col :span="6" class="table-list-lie"><span>运单总量</span></el-col>
                <el-col :span="6" class="table-list-lie"><span>已完成</span></el-col>
                <el-col :span="6" class="table-list-lie"><span>未完成</span></el-col>
            </el-col>
            <el-col :span="24" class="table-list" v-if="waybillData.beijing">
                <el-col :span="6" class="table-list-lie"><span class="city">{{waybillData.beijing?waybillData.beijing.city:''}}</span></el-col>
                <el-col :span="6" class="table-list-lie"><span class="fontsize16">{{waybillData.beijing?waybillData.beijing.express_number:'0'}}</span></el-col>
                <el-col :span="6" class="table-list-lie"><span class="fontsize16">{{waybillData.beijing?waybillData.beijing.finish:'0'}}</span></el-col>
                <el-col :span="6" class="table-list-lie"><span class="fontsize16">{{waybillData.beijing?waybillData.beijing.not_finish:'0'}}</span></el-col>
            </el-col>
            <el-col :span="24" class="table-list" v-if="waybillData.shanghai">
                <el-col :span="6" class="table-list-lie"><span class="city">{{waybillData.shanghai?waybillData.shanghai.city:''}}</span></el-col>
                <el-col :span="6" class="table-list-lie"><span class="fontsize16">{{waybillData.shanghai?waybillData.shanghai.express_number:'0'}}</span></el-col>
                <el-col :span="6" class="table-list-lie"><span class="fontsize16">{{waybillData.shanghai?waybillData.shanghai.finish:'0'}}</span></el-col>
                <el-col :span="6" class="table-list-lie"><span class="fontsize16">{{waybillData.shanghai?waybillData.shanghai.not_finish:'0'}}</span></el-col>
            </el-col>
            <el-col :span="24" class="table-list" v-if="waybillData.shenzheng">
                <el-col :span="6" class="table-list-lie"><span class="city">{{waybillData.shenzheng?waybillData.shenzheng.city:''}}</span></el-col>
                <el-col :span="6" class="table-list-lie"><span class="fontsize16">{{waybillData.shenzheng?waybillData.shenzheng.express_number:'0'}}</span></el-col>
                <el-col :span="6" class="table-list-lie"><span class="fontsize16">{{waybillData.shenzheng?waybillData.shenzheng.finish:'0'}}</span></el-col>
                <el-col :span="6" class="table-list-lie"><span class="fontsize16">{{waybillData.shenzheng?waybillData.shenzheng.not_finish:'0'}}</span></el-col>
            </el-col>


        </el-row>
    </div>
</template>

<script>
    import chartTransverseBar from '../../../../components/chart/transverseBar';

    export default {
        name: "waybillStatistics",
        props: {
            waybillData:{
                type: Object,
                default: ()=>{
                    return {}
                }
            }
        },
        data() {
            return {}
        },
        mounted() {
        },
        methods: {},
        components: {
            chartTransverseBar
        }
    }
</script>

<style scoped lang="less">
    .list-title {
        margin: 30px 0 10px 0;
        .list-title-title {
            margin-left: 173px;
            font-size: 20px;
            color: rgba(0, 0, 0, 0.87);
        }
        .list-title-des {
            margin-left: 49px;
            font-size: 14px;
            color: rgba(255, 0, 0, 0.87);
        }
    }
    .table-data{
        text-align: center;
        border:1px solid rgba(0,0,0,0.12);
        border-right:none;

        .fontsize16{
            font-size: 16px;
        }
        .table-list{
            .table-list-lie{
                height: 52px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                /*padding: 7px 30px;*/
                border-right:1px solid rgba(0,0,0,0.12);
                .city{
                    font-size:18px;
                }
            }
        }
        .table-list:nth-of-type(1){
            display: flex;
            color:rgba(0,0,0,0.54);
            font-size:18px;
        }
        .table-list:nth-of-type(2n-1){
            background-color: rgba(0,0,0,0.12);
        }
    }
</style>
